<template>
  <div class="goods-detail" ref="main" @scroll="keepScroll">
    <div class="content" ref="content">
      <!-- 顶部导航栏 -->
      <div class="top-nav" :class="{ scrollStyle: topNavStyleStatus }">
        <div
          class="icon goback"
          :class="{ iconScrollStyle: topNavStyleStatus }"
          @click="goBack"
        >
          <van-icon name="arrow-left" />
        </div>
        <div class="content-nav" v-show="topNavStyleStatus">
          <div
            class="content-nav-item"
            :class="{ active: topNavActive == index }"
            v-for="(item, index) in topNavData"
            :key="index"
            @click="topNavActiveHandel(index)"
          >
            {{ item.title }}
            <div class="line" v-show="topNavActive == index"></div>
          </div>
        </div>
        <div class="icon share" :class="{ iconScrollStyle: topNavStyleStatus }">
          <van-icon name="share-o" />
        </div>
      </div>
      <!-- 轮播图 -->
      <div class="swiper">
        <van-swipe :autoplay="3000" touchable @change="onChange">
          <van-swipe-item
            v-for="(item, index) in swipeImgs"
            :key="index"
            @click="goToGoodsDetail(item)"
          >
            <img class="auto-img" v-lazy="item.img_url" />
          </van-swipe-item>
          <template #indicator>
            <div class="custom-indicator">
              {{ current + 1 }} / {{ swipeImgs.length }}
            </div>
          </template>
        </van-swipe>
      </div>
      <!-- 价格 -->
      <div class="price-box">
        <div class="price-discount"><span>¥</span>{{ goodsPrice }}</div>
        <div class="price"><span>¥</span>2399</div>
      </div>
      <!-- 券 -->
      <div class="discount">
        <div class="left">
          <div class="text">券</div>
          <div class="ticket first">30元立减券</div>
          <div class="ticket second">预计得240米金</div>
        </div>
        <div class="right">领取</div>
      </div>
      <!-- 商品描述 -->
      <div v-if="product_info != null">
        <div class="name">{{ product_info.name }}</div>
        <div class="tip">
          <div class="desc-discount">{{ product_info.product_desc_ext }}</div>
          <div
            class="desc-sell_point"
            v-for="(item, index) in product_info.sell_point_desc"
          >
            <div class="content-list">
              <div class="left">{{ index }}</div>
              <div class="right">{{ item }}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 商品性能参数 -->
      <div class="goods-params" v-if="class_parameters != null">
        <div class="content-wrap">
          <div class="content-list" v-for="(item, index) in class_parameters">
            <div class="icon">
              <img class="auto-img" :src="item.icon" alt="" />
            </div>
            <div class="title">{{ item.top_title }}</div>
            <div class="value">{{ item.value }}</div>
          </div>
        </div>
      </div>
      <!-- 排行榜 -->
      <div class="rank">
        <div class="left">
          <div class="left-left">
            <div class="icon"><van-icon name="medal" /></div>
            <div class="rank-text">排行榜</div>
          </div>
          <div class="left-right">
            <div class="text">入选【小米手机热销榜】</div>
          </div>
        </div>
        <div class="right"><van-icon name="arrow" /></div>
      </div>
      <div class="bg"></div>
      <!-- 选择商品 -->
      <div class="choose-goods">
        <div class="choose-status">已选</div>
        <div class="goods-name" v-if="product_info != null">
          {{ product_info.name }} {{ goodsVersion }} {{ goodsColor }}x{{
            goodsNum
          }}
        </div>
        <div class="arrow"><van-icon name="arrow" /></div>
      </div>
      <!-- 配送至 -->
      <div class="address">
        <div class="sent-text">送至</div>
        <div class="sent-address">
          <div class="icon"><van-icon name="location-o" /></div>
          <div class="address-address">北京市 东城区</div>
          <div class="goods-status">有现货</div>
        </div>
        <div class="arrow"><van-icon name="arrow" /></div>
      </div>
      <!-- 小米自营保证字体 -->
      <div class="server">
        <div class="text-box">
          <div class="text-top">
            <div class="text1">
              <span class="iconfont icon-kongxinduigou"></span>小米自营
            </div>
            <div class="text2">
              <span class="iconfont icon-kongxinduigou"></span>小米发货
            </div>
          </div>
          <div class="text-bottom">
            <span class="iconfont icon-kongxinduigou"></span
            >7天无理由退货（到店自取拆封后不支持）
          </div>
        </div>
        <div class="arrow"><van-icon name="arrow" /></div>
      </div>
      <div class="bg"></div>
      <!-- 用户评论区 -->
      <div
        class="user-comment"
        ref="userComment"
        v-if="goods_share_datas != null"
      >
        <div class="top-nav2">
          <div class="title">用户评论</div>
          <div class="right">
            <div class="text">
              {{ goods_share_datas.comments.detail.satisfy_per }}
            </div>
            <div class="arrow"><van-icon name="arrow" /></div>
          </div>
        </div>
        <div class="hot-words">
          <div
            class="hot-words-list"
            v-for="item in goods_share_datas.comments.detail.comment_tags"
            :key="item.tag_id"
          >
            {{ item.tag_name }}
          </div>
        </div>
        <div class="comment-wrap">
          <div class="comment-list-wrap">
            <div
              class="comment-list"
              v-for="item in goods_share_datas.comments.list"
              :key="item.comment_id"
            >
              <div class="user-msg">
                <div class="img-box">
                  <img class="auto-img" :src="item.user_avatar" alt="" />
                </div>
                <div class="msg-box">
                  <div class="user-name">{{ item.user_name }}</div>
                  <div class="time">{{ item.add_time }}</div>
                </div>
              </div>
              <div class="comment-content" v-html="item.comment_content"></div>
              <div class="show-imgs">
                <div class="imgs-list" v-for="imgs in item.comment_images">
                  <img class="auto-img" :src="imgs" alt="" />
                </div>
              </div>
            </div>
            <div class="search-all">查看全部<van-icon name="arrow" /></div>
          </div>
        </div>
      </div>
      <div class="bg"></div>
      <!-- 米粉点评团 -->
      <div class="m-fans-show">
        <div class="m-top-nav">
          <div class="title">米粉点评团</div>
          <div class="arrow"><van-icon name="arrow" /></div>
        </div>
        <div class="m-content-wrap">
          <div class="content-list-wrap" v-if="miFansComment != null">
            <div
              class="content-list"
              v-for="item in miFansComment"
              :key="item.id"
            >
              <div class="top-img">
                <div class="blur-img">
                  <img
                    v-if="item.pic_list.length > 0"
                    :src="item.pic_list[0].img"
                    alt=""
                  />
                </div>
                <div class="blur-bg"></div>
                <div class="img-box">
                  <img
                    class="auto-img"
                    v-if="item.pic_list.length > 0"
                    :src="item.pic_list[0].img"
                    alt=""
                  />
                </div>
              </div>
              <div class="text">{{ item.content }}</div>
              <div class="m-user-msg">
                <div class="user-img">
                  <img class="auto-img" :src="item.icon" alt="" />
                </div>
                <div class="user-name">{{ item.nickname }}</div>
                <div class="icon-eye"><van-icon name="eye-o" /></div>
                <div class="view-count">
                  {{
                    item.praise_num > 10000
                      ? item.praise_num / 10000 + "万"
                      : item.praise_num
                  }}
                </div>
              </div>
            </div>
            <div class="search-all">查看全部<van-icon name="arrow" /></div>
          </div>
        </div>
      </div>
      <!-- 轮播图2 -->
      <div class="swiper2">
        <div class="swiper2-content">
          <van-swipe :autoplay="3000" touchable @change="onChange2">
            <van-swipe-item
              v-for="(item, index) in swipeImgs2"
              :key="index"
              @click="goToGoodsDetail(item)"
            >
              <img class="auto-img" v-lazy="item.img" />
            </van-swipe-item>
          </van-swipe>
        </div>
      </div>
      <!-- 商品推荐 -->
      <div class="goods-recomment">
        <van-tabs
          v-model="recommentActive"
          title-active-color="rgb(255, 103, 0)"
          title-inactive-color="#000"
          line-width="20px"
          line-height="3px"
        >
          <van-tab
            :title="related_recommend.title"
            v-if="related_recommend != null"
          >
            <div class="content-wrap">
              <div
                class="content-list"
                v-for="item in related_recommend.data"
                :key="item.product_id"
              >
                <div class="top-img">
                  <img class="auto-img" :src="item.image_url" alt="" />
                </div>
                <div class="goods-name">{{ item.name }}</div>
                <div class="price">
                  <span class="new-price">¥{{ item.price }}起</span>
                  <span class="before-price">¥{{ item.market_price }}</span>
                </div>
              </div>
            </div>
          </van-tab>
          <van-tab :title="hot_parts.title" v-if="hot_parts != null">
            <div class="content-wrap" @scroll="toChangeScrollBar($event)">
              <div class="content-list-wrap" ref="recommentGoods">
                <div
                  class="content-list"
                  v-for="item in hot_parts.parts"
                  :key="item.product_id"
                >
                  <div class="top-img">
                    <img class="auto-img" :src="item.image_url" alt="" />
                  </div>
                  <div class="goods-name">{{ item.name }}</div>
                  <div class="price">
                    <span class="new-price">¥{{ item.price }}起</span>
                    <span class="before-price">¥{{ item.market_price }}</span>
                  </div>
                </div>
              </div>
            </div>
            <!-- 滚动条 -->
            <div class="scrollbar-wrap">
              <scrollBarCom
                :presentMove="presentMove"
                :Barwidth="60"
                :BarHeight="3"
                :activeBarWidth="25"
              />
            </div>
          </van-tab>
        </van-tabs>
      </div>
      <div class="bg"></div>
      <!-- 商品介绍 -->
      <div class="goods-info" ref="goodsRecomment">
        <van-tabs
          v-model="goodsInfoActive"
          title-active-color="rgb(255, 103, 0)"
          title-inactive-color="#000"
          line-width="20px"
          line-height="3px"
        >
          <van-tab
            v-if="goods_info_imgs != null"
            :title="goods_info_imgs.tab_name"
          >
            <div class="img-box" v-for="item in goods_info_imgs.page_info">
              <img class="auto-img" :src="item.body.img_url" alt="" />
            </div>
          </van-tab>
          <van-tab
            v-if="goods_info_imgs2 != null"
            :title="goods_info_imgs2.tab_name"
          >
            <div class="img-box" v-for="item in goods_info_imgs2.page_info">
              <img class="auto-img" :src="item.body.img_url" alt="" />
            </div>
          </van-tab>
        </van-tabs>
      </div>
      <!-- 商品推荐 -->
      <div class="bottom-title" ref="bottomRecomment">商品推荐</div>
      <div class="bottom-goods-recomment">
        <div class="content-wrap" v-if="bottomGoodsRecomment.length > 0">
          <div
            class="content-list"
            v-for="(item, index) in bottomGoodsRecomment"
            :key="index"
          >
            <div class="img-box">
              <img class="auto-img" :src="item.image_url" alt="" />
            </div>
            <div class="goods-name">{{ item.name }}</div>
            <div class="goods-price"><span>¥</span>{{ item.price }}</div>
          </div>
        </div>
      </div>
      <!-- 返回顶部按钮 -->
      <div class="goToTop-btn" v-if="topNavStyleStatus" @click="goToTop"></div>
    </div>
    <!-- 购买弹出层 -->
    <van-popup
      v-model="popupShow"
      closeable
      round
      position="bottom"
      :style="{ height: '70%' }"
    >
      <!-- 购买商品信息 -->
      <div class="show-area">
        <div class="img-box">
          <img class="auto-img" :src="goodsImgs[colorIndex].img" alt="" />
        </div>
        <div class="info">
          <div class="info-price">¥{{ goodsPrice }}</div>
          <div class="info-goods" v-if="product_info != null">
            {{ product_info.name }} {{ goodsVersion }} {{ goodsColor }}
          </div>
        </div>
      </div>
      <!-- 版本 -->
      <div class="version-area" v-if="buyOptions != null">
        <div class="version-title">{{ buyOptions[0].name }}</div>
        <div
          ref="version"
          class="version-choice"
          :class="{ choiceActive: versionIndex == index }"
          v-for="(item, index) in buyOptions[0].list"
          :key="index"
          @click="versionActive(index, item)"
        >
          {{ item.name }}
        </div>
      </div>
      <!-- 颜色 -->
      <div class="color-area" v-if="buyOptions != null">
        <div class="color-title">{{ buyOptions[1].name }}</div>
        <div class="color-choice-wrap">
          <div
            ref="color"
            class="color-choice"
            :class="{ choiceActive: colorIndex == index }"
            v-for="(item, index) in buyOptions[1].list"
            :key="index"
            @click="colorActive(index, item)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <!-- 购买数量 -->
      <div class="bug-area">
        <div class="bug-title">购买数量</div>
        <div class="bug-choice-num">
          <div class="reduce" @click="reduceGoodsNum">
            <van-icon name="minus" />
          </div>
          <div class="num">{{ goodsNum }}</div>
          <div class="add" @click="addGoodsNum"><van-icon name="plus" /></div>
        </div>
      </div>
      <van-goods-action-button
        type="danger"
        text="确定"
        @click="toConfirmBug"
      />
    </van-popup>
    <!-- 底部按钮 -->
    <van-goods-action v-if="shopcartData != null">
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon
        :icon="isCollected ? 'star' : 'star-o'"
        :text="isCollected ? '已收藏' : '收藏'"
        @click="collectHandel"
        :color="isCollected ? '#ff5000' : '#000'"
      />
      <van-goods-action-icon
        icon="cart-o"
        text="购物车"
        :badge="shopcartData.length"
        @click="goToShopCart"
      />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="showPopup"
      />
      <van-goods-action-button
        type="danger"
        text="立即购买"
        @click="showPopup"
      />
    </van-goods-action>
  </div>
</template>

<script>
import { getGoodsDetail, getGoodsDetailFansComment } from "@/api/home";
import { throttle } from "@/utils/throttle";
import { dateFtt } from "@/utils/timeformat";
import scrollBarCom from "@/components/scrollBarCom.vue";
import { mapState, mapMutations } from "vuex";

export default {
  name: "goodsDetailView",
  components: {
    scrollBarCom,
  },
  data() {
    return {
      //顶部导航栏下标
      topNavActive: 0,
      //顶部导航栏数据
      topNavData: [
        {
          title: "商品",
        },
        {
          title: "评价",
        },
        {
          title: "详情",
        },
        {
          title: "推荐",
        },
      ],
      //轮播图数据
      swipeImgs: [],
      swipeImgs2: [
        {
          img: require("@/assets/images/home/4de610a0f73ad986fcf45b5170377227.jpg"),
        },
        {
          img: require("@/assets/images/home/fb1f54513ac5b3abdaede104dc8871b8.jpg"),
        },
        {
          img: require("@/assets/images/home/9bbe11b49ee00163512dcc19ab736acf.png"),
        },
      ],
      //轮播图下标
      current: 0,
      current2: 0,
      //商品介绍
      product_info: null,
      //性能参数
      class_parameters: null,
      //滚动距离
      scrollTop: 0,
      //商品评论数据
      goods_share_datas: null,
      //商品推荐下标
      recommentActive: 0,
      //商品推荐
      related_recommend: null,
      //爆款推荐
      hot_parts: null,
      //滚动条滚动比率
      presentMove: 0,
      //商品介绍下标
      goodsInfoActive: 0,
      //商品介绍图片数据
      goods_info_imgs: null,
      goods_info_imgs2: null,
      //顶部导航栏激活样式
      topNavStyleStatus: false,
      //底部商品推荐数据
      bottomGoodsRecomment: [],
      //弹出层状态
      popupShow: false,
      //选择版本激活下标
      versionIndex: 0,
      //选择颜色激活下标
      colorIndex: 0,
      //购买选项
      buyOptions: null,
      //购买价格
      goodsPrice: null,
      //购买版本
      goodsVersion: null,
      //购买颜色
      goodsColor: null,
      //购买数量
      goodsNum: 1,
      //定时器
      timer: null,
      //购买选项图片
      goodsImgs: [
        {
          img: require("@/assets/images/home/微信图片_20221208153610.jpg"),
        },
        {
          img: require("@/assets/images/home/微信图片_20221208153637.jpg"),
        },
        {
          img: require("@/assets/images/home/微信图片_20221208153642.jpg"),
        },
        {
          img: require("@/assets/images/home/微信图片_20221208153645.jpg"),
        },
        {
          img: require("@/assets/images/home/微信图片_20221208154159.jpg"),
        },
      ],
      //米粉点评团
      miFansComment: null,
      //获取购物车数据
      shopcartData: null,
      //收藏状态
      isCollected: false,
      //全部数据
      allData: null,
      //收藏数据
      collectedData: null,
      //历史记录
      historyData: null,
    };
  },
  created() {},
  activated() {
    //获取页面数据
    this.getGoodsDetailData(15694);
    //获取米粉点评团数据
    this.getGoodsDetailFansCommentData(15694);
    //获取购物车数据
    this.shopcartData = JSON.parse(localStorage.getItem("shopcartData"));
    //获取收藏数据
    this.collectedData = JSON.parse(localStorage.getItem("collectedData"));
    //获取收藏数据
    this.historyData = JSON.parse(localStorage.getItem("historyData"));
    //获取点击加入购物车首次加载的数据
    this.timer = setTimeout(() => {
      this.goodsPrice = this.buyOptions[0].list[0].price;
      this.goodsVersion = this.buyOptions[0].list[0].name;
      this.goodsColor = this.buyOptions[1].list[0].name;
      this.timer = null;
      //获取收藏状态
      this.getCollectStatus();
      //添加历史记录
      this.addHistoryData();
    }, 400);
  },
  watch: {
    goodsColor() {
      //获取收藏状态
      this.getCollectStatus();
      //添加历史记录
      this.addHistoryData();
    },
    goodsVersion() {
      //获取收藏状态
      this.getCollectStatus();
      //添加历史记录
      this.addHistoryData();
    },
    goodsPrice() {
      //获取收藏状态
      this.getCollectStatus();
      //添加历史记录
      this.addHistoryData();
    },
  },
  methods: {
    ...mapMutations(["toAddCartData"]),
    //获取数据
    getGoodsDetailData(id) {
      getGoodsDetail({ axios: this.axios }, id).then((res) => {
        let result = res.data.data;
        this.allData = result;
        //轮播图数据
        this.swipeImgs = result.goods_info[0].gallery_v3;
        //商品介绍
        this.product_info = result.product_info;
        //性能参数
        this.class_parameters =
          result.goods_info[0].class_parameters.list.filter((item) => {
            return item.icon != undefined;
          });
        //商品评论数据
        this.goods_share_datas = result.goods_share_datas;
        //商品推荐
        this.related_recommend = result.related_recommend;
        //爆款推荐
        this.hot_parts = result.hot_parts;
        //商品介绍
        for (let key in result.goods_tpl_datas) {
          this.goods_info_imgs =
            result.goods_tpl_datas[key].sections[26].body.items[0];
          this.goods_info_imgs2 =
            result.goods_tpl_datas[key].sections[26].body.items[1];
        }
        //底部商品推荐数据
        this.bottomGoodsRecomment.push(...this.related_recommend.data);
        this.bottomGoodsRecomment.push(...this.hot_parts.parts);
        //购买选项
        this.buyOptions = result.buy_option;
      });
    },
    //获取米粉点评团数据
    getGoodsDetailFansCommentData(id) {
      getGoodsDetailFansComment({ axios: this.axios }, id).then((res) => {
        let data = res.data.data.content_list.slice(0, 7);
        let result = data.filter((item) => {
          return item.pic_list.length > 0;
        });
        this.miFansComment = result;
        // console.log(this.miFansComment);
      });
    },
    //轮播图切换
    onChange(index) {
      this.current = index;
    },
    onChange2(index) {
      this.current2 = index;
    },
    //滚动状态
    keepScroll: throttle(function () {
      this.scrollTop = this.$refs.main.scrollTop;
      if (this.scrollTop >= 400) {
        this.topNavStyleStatus = true;
      } else {
        this.topNavStyleStatus = false;
      }
      if (
        this.scrollTop + 100 >= 0 &&
        this.scrollTop + 100 < this.$refs.userComment.offsetTop - 20
      ) {
        this.topNavActive = 0;
      } else if (
        this.scrollTop + 100 >= this.$refs.userComment.offsetTop - 20 &&
        this.scrollTop + 100 < this.$refs.goodsRecomment.offsetTop - 20
      ) {
        this.topNavActive = 1;
      } else if (
        this.scrollTop + 100 >= this.$refs.goodsRecomment.offsetTop - 20 &&
        this.scrollTop + 100 < this.$refs.bottomRecomment.offsetTop - 20
      ) {
        this.topNavActive = 2;
      } else if (
        this.scrollTop + 100 >= this.$refs.bottomRecomment.offsetTop - 20 &&
        this.scrollTop + 100 < this.$refs.content.clientHeight
      ) {
        this.topNavActive = 3;
      }
    }, 100),
    //返回上一级路由
    goBack() {
      this.$router.go(-1);
    },
    //爆款推荐滚动方法
    toChangeScrollBar: throttle(function (e) {
      //滚动距离
      let moveX = e.target.scrollLeft;
      //两条滚动条的差额
      let presentW =
        this.$refs.recommentGoods.clientWidth - this.$refs.main.clientWidth;
      //移动距离的比率
      let presentMove = moveX / presentW;
      //限制最小为0,最大为1
      presentMove = presentMove < 0 ? 0 : presentMove > 1 ? 1 : presentMove;
      this.presentMove = presentMove;
    }, 40),
    //顶部导航栏点击方法
    topNavActiveHandel(index) {
      if (this.topNavActive == index) {
        return;
      }
      this.topNavActive = index;
      if (index == 0) {
        this.$refs.main.scrollTo(0, 0);
      } else if (index == 1) {
        this.$refs.main.scrollTo(0, this.$refs.userComment.offsetTop - 50);
      } else if (index == 2) {
        this.$refs.main.scrollTo(0, this.$refs.goodsRecomment.offsetTop - 50);
      } else if (index == 3) {
        this.$refs.main.scrollTo(0, this.$refs.bottomRecomment.offsetTop - 50);
      }
    },
    //返回顶部
    goToTop() {
      this.$refs.main.scrollTo(0, 0);
    },
    //加入购物车弹出层
    showPopup() {
      this.popupShow = true;
    },
    //版本激活tab
    versionActive(index, item) {
      if (this.versionIndex == index) {
        return;
      }
      this.versionIndex = index;
      this.goodsPrice = item.price;
      this.goodsVersion = item.name;
    },
    //颜色激活tab
    colorActive(index, item) {
      if (this.colorIndex == index) {
        return;
      }
      this.colorIndex = index;
      this.goodsColor = item.name;
    },
    //加入购物车按钮点击事件
    toConfirmBug() {
      let version = this.buyOptions[0].list[this.versionIndex].name;
      let color = this.buyOptions[1].list[this.colorIndex].name;
      let time = new Date();
      let createTime = dateFtt("yyyy-MM-dd hh:mm:ss", time);
      let addShopCartData = {
        version,
        color,
        id: this.product_info.product_id,
        img: this.goodsImgs[this.colorIndex],
        price: this.goodsPrice.slice(0, -1),
        num: this.goodsNum,
        name: this.product_info.name,
        index: this.colorIndex,
        createTime,
        checkState: false,
      };
      this.shopcartData.push(addShopCartData);
      localStorage.setItem("shopcartData", JSON.stringify(this.shopcartData));
      this.$toast.success("添加购物车成功");
      this.popupShow = false;
    },
    //增加购买数量
    addGoodsNum() {
      this.goodsNum++;
    },
    //减少购买数量
    reduceGoodsNum() {
      this.goodsNum--;
    },
    //收藏
    collectHandel() {
      this.isCollected = !this.isCollected;
      if (this.isCollected) {
        let time = new Date();
        let createTime = dateFtt("yyyy-MM-dd hh:mm:ss", time);
        let collectedData = {
          id: this.allData.product_info.product_id,
          img: this.goodsImgs[this.colorIndex].img,
          name: this.allData.product_info.name,
          isCollected: true,
          price: this.goodsPrice.slice(0, -1),
          version: this.goodsVersion,
          color: this.goodsColor,
          createTime,
          checkState: false,
        };
        let localCollectedData = JSON.parse(
          localStorage.getItem("collectedData")
        );
        let priceArr = [];
        let versionArr = [];
        let colorArr = [];
        localCollectedData.forEach((item) => {
          priceArr.push(item.price);
          versionArr.push(item.version);
          colorArr.push(item.color);
        });
        if (
          priceArr.indexOf(collectedData.price) == -1 ||
          versionArr.indexOf(collectedData.version) == -1 ||
          colorArr.indexOf(collectedData.color) == -1
        ) {
          this.collectedData.push(collectedData);
          localStorage.setItem(
            "collectedData",
            JSON.stringify(this.collectedData)
          );
        }
      } else if (!this.isCollected) {
        this.collectedData = JSON.parse(localStorage.getItem("collectedData"));
        this.collectedData.forEach((item, index) => {
          if (
            item.version == this.goodsVersion &&
            item.color == this.goodsColor &&
            item.price == this.goodsPrice.slice(0, -1)
          ) {
            this.collectedData.splice(index,1);
            localStorage.setItem(
              "collectedData",
              JSON.stringify(this.collectedData)
            );
          }
        });
      }
    },
    //获取收藏状态
    getCollectStatus() {
      this.collectedData = JSON.parse(localStorage.getItem("collectedData"));
      let idArr = [];
      let priceArr = [];
      let versionArr = [];
      let colorArr = [];
      if (this.collectedData.length > 0) {
        this.collectedData.forEach((item) => {
          idArr.push(item.id);
          priceArr.push(item.price);
          versionArr.push(item.version);
          colorArr.push(item.color);
        });
        this.collectedData.forEach((item) => {
          if (
            idArr.indexOf(item.id) != -1 &&
            priceArr.indexOf(this.goodsPrice.slice(0, -1)) != -1 &&
            versionArr.indexOf(this.goodsVersion) != -1 &&
            colorArr.indexOf(this.goodsColor) != -1
          ) {
            this.isCollected = true;
          } else {
            this.isCollected = false;
          }
        });
      }
    },
    //添加数据到历史记录
    addHistoryData() {
      let time = new Date();
      let createTime = dateFtt("yyyy-MM-dd hh:mm:ss", time);
      let historyData = {
        id: this.allData.product_info.product_id,
        img: this.goodsImgs[this.colorIndex].img,
        name: this.allData.product_info.name,
        isCollected: true,
        price: this.goodsPrice.slice(0, -1),
        version: this.goodsVersion,
        color: this.goodsColor,
        createTime,
        checkState: false,
        createAt: new Date().getTime(),
      };
      this.historyData = JSON.parse(localStorage.getItem("historyData"));
      let idArr = [];
      let priceArr = [];
      let versionArr = [];
      let colorArr = [];
      this.historyData.forEach((item) => {
        if (idArr.indexOf(item.id) == -1) {
          idArr.push(item.id);
        }
        if (priceArr.indexOf(item.price) == -1) {
          priceArr.push(item.price);
        }
        if (versionArr.indexOf(item.version) == -1) {
          versionArr.push(item.version);
        }
        if (colorArr.indexOf(item.color) == -1) {
          colorArr.push(item.color);
        }
      });
      if (
        versionArr.indexOf(historyData.version) == -1 ||
        colorArr.indexOf(historyData.color) == -1
      ) {
        this.historyData.unshift(historyData);
        localStorage.setItem("historyData", JSON.stringify(this.historyData));
      }
    },
    //前往购物车
    goToShopCart() {
      this.$router.push({ name: "ShopcartView" });
    },
  },
};
</script>

<style lang="scss" scoped>
.goods-detail {
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  z-index: 10;
  position: fixed;
  overflow: auto;
  box-sizing: border-box;
  top: 0;
  left: 0;
  padding: 10px 10px 60px;
  transition: all linear 0.5s;
  .content {
    padding-bottom: 60px;
  }
  .top-nav {
    width: 100vw;
    height: 50px;
    position: fixed;
    box-sizing: border-box;
    top: 0;
    left: 0;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    z-index: 15;
    &.scrollStyle {
      background-color: #fff;
    }
    .content-nav {
      display: flex;
      align-items: center;
      font-size: 14px;
      .content-nav-item {
        margin-right: 20px;
        padding-bottom: 3px;
        position: relative;
        &.active {
          color: rgb(255, 103, 0);
        }
        .line {
          width: 15px;
          height: 3px;
          position: absolute;
          bottom: -4px;
          left: 0;
          right: 0;
          margin: 0 auto;
          background-color: rgb(255, 103, 0);
        }
      }
    }
    .icon {
      width: 30px;
      height: 30px;
      background-color: rgba(0, 0, 0, 0.35);
      color: #fff;
      border-radius: 999px;
      font-size: 18px;
      text-align: center;
      line-height: 30px;
      z-index: 20;
      &.iconScrollStyle {
        background-color: #fff;
        color: #000;
      }
    }
  }
  .swiper {
    width: 100vw;
    position: relative;
    top: -10px;
    left: -10px;
    .custom-indicator {
      position: absolute;
      right: 15px;
      bottom: 15px;
      padding: 3px 6px;
      font-size: 12px;
      background: rgba(0, 0, 0, 0.5);
      color: #fff;
      border-radius: 999px;
    }
  }
  .price-box {
    display: flex;
    justify-content: left;
    .price-discount {
      color: rgb(255, 103, 0);
      font-size: 25px;
      font-weight: 600;
      span {
        font-size: 15px;
        position: relative;
        top: -10px;
      }
    }
    .price {
      margin-left: 10px;
      position: relative;
      top: 10px;
      text-decoration: line-through;
      span {
        position: relative;
        top: -2px;
      }
    }
  }
  .discount {
    background-color: rgb(255, 242, 239);
    width: 100%;
    height: 36px;
    padding: 0 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    border-radius: 5px;
    margin: 10px 0;
    .left {
      display: flex;
      height: 50%;
      margin-top: 9px;
      text-align: center;
      .text {
        background-color: rgb(255, 103, 0);
        color: #fff;
        padding: 0px 2px;
        border-top-left-radius: 2px;
        border-bottom-left-radius: 2px;
        line-height: 18px;
      }
      .ticket {
        color: rgb(255, 103, 0);
        border: 1px solid rgb(255, 103, 0);
        padding: 0 2px;
        border-radius: 2px;
        line-height: 18px;
        &.first {
          margin-right: 10px;
          border-top-right-radius: 2px;
          border-bottom-right-radius: 2px;
          border-top-left-radius: 0px;
          border-bottom-left-radius: 0px;
        }
      }
    }
    .right {
      height: 50%;
      margin-top: 9px;
      border-radius: 3px;
      line-height: 19px;
      background-color: rgb(255, 103, 0);
      color: #fff;
      padding: 0 10px;
    }
  }
  .name {
    text-align: left;
    font-size: 18px;
    font-weight: 600;
    margin: 10px 0;
  }
  .tip {
    width: 100%;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    .desc-discount {
      text-align: left;
      line-height: 16px;
    }
    .desc-sell_point {
      .content-list {
        display: flex;
        align-items: center;
        margin-top: 10px;
        .left {
          width: 15px;
          height: 15px;
          border-radius: 5px;
          border: 1px solid #ddd;
          margin-right: 5px;
          line-height: 15px;
        }
        .right {
          line-height: 15px;
        }
      }
    }
  }
  .goods-params {
    width: 100%;
    margin: 15px 0;
    overflow: auto;
    .content-wrap {
      display: flex;
      width: 800px;
      .content-list {
        flex: 0 0 80px;
        .icon {
          width: 25px;
          height: 25px;
          margin: 0 auto;
        }
        .value {
          width: 80px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
      }
    }
  }
  .rank {
    width: 100vw;
    position: relative;
    left: -10px;
    display: flex;
    justify-content: space-between;
    background-color: rgb(255, 243, 235);
    height: 40px;
    align-items: center;
    padding: 0 15px;
    box-sizing: border-box;
    .left {
      display: flex;
      align-items: center;
      .left-left {
        display: flex;
        align-items: center;
        .icon {
          width: 25px;
          height: 25px;
          border-radius: 999px;
          margin-right: 10px;
          font-size: 25px;
          color: rgb(255, 103, 0);
        }
        .rank-text {
          font-weight: 600;
          font-size: 16px;
          margin-right: 20px;
        }
      }
      .left-right {
        font-weight: 600;
      }
    }
    .van-icon-arrow {
      font-size: 14px;
    }
  }
  .bg {
    height: 10px;
    width: 100vw;
    position: relative;
    left: -10px;
    background-color: rgb(246, 246, 246);
  }
  .choose-goods {
    display: flex;
    height: 40px;
    align-items: center;
    line-height: 40px;
    padding-left: 10px;
    padding-right: 5px;
    box-sizing: border-box;
    border-bottom: 1px solid #ddd;
    font-size: 14px;
    .choose-status {
      margin-right: 20px;
    }
    .arrow {
      margin-left: auto;
    }
  }
  .address {
    height: 40px;
    display: flex;
    font-size: 14px;
    align-items: center;
    padding: 0 5px 0 10px;
    line-height: 40px;
    .sent-address {
      display: flex;
      align-items: center;
      margin-left: 20px;
      .icon {
        font-weight: 600;
      }
      .address-address {
        margin: 0 5px;
      }
      .goods-status {
        color: rgb(255, 103, 0);
      }
    }
    .arrow {
      margin-left: auto;
      font-size: 14px;
    }
  }
  .server {
    width: calc(100% - 15px);
    padding: 0 5px 10px 10px;
    color: #888;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .text-top {
      display: flex;
      .text1 {
        margin-right: 20px;
      }
    }
    .text-bottom {
      text-align: left;
      margin-top: 10px;
    }
    .van-icon-arrow {
      font-size: 14px;
    }
  }
  .user-comment {
    .top-nav2 {
      display: flex;
      justify-content: space-between;
      padding: 15px 5px;
      .title {
        font-weight: 600;
        font-size: 16px;
      }
      .right {
        display: flex;
        .arrow {
          margin-left: 5px;
        }
      }
    }
    .hot-words {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      padding: 0 40px 0 10px;
      .hot-words-list {
        width: 60px;
        height: 20px;
        line-height: 20px;
        border-radius: 999px;
        background-color: rgb(255, 238, 234);
        margin: 0 10px 10px 0;
        padding: 0 3px;
      }
    }
    .comment-wrap {
      overflow-x: scroll;
      .comment-list-wrap {
        padding-left: 10px;
        display: flex;
        align-items: center;
        width: 1520px;
        .comment-list {
          width: 300px;
          border: 1px solid #ddd;
          border-radius: 8px;
          margin-right: 10px;
          padding: 20px 10px;
          box-sizing: border-box;
          .user-msg {
            margin-right: auto;
            display: flex;
            align-items: center;
            .img-box {
              width: 35px;
              height: 35px;
              border-radius: 999px;
              margin-right: 10px;
              overflow: hidden;
            }
            .msg-box {
              text-align: left;
              .user-name {
                font-size: 14px;
                font-weight: 600;
              }
              .time {
                color: #999;
              }
            }
          }
          .comment-content {
            text-align: left;
            line-height: 15px;
            margin: 10px 0;
            padding-left: 5px;
            color: #888;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
          .show-imgs {
            display: flex;
            .imgs-list {
              width: 80px;
              height: 80px;
              margin-right: 10px;
              border-radius: 8px;
              overflow: hidden;
            }
          }
        }
        .search-all {
          width: 30px;
          padding: 0 8px;
          box-sizing: border-box;
          color: #888;
          line-height: 15px;
          .van-icon-arrow {
            width: 15px;
            height: 15px;
            border-radius: 999px;
            border: 1px solid #ddd;
            box-sizing: border-box;
            margin-top: 5px;
            text-align: center;
            line-height: 15px;
          }
        }
      }
    }
  }
  .m-fans-show {
    .m-top-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 5px 0 10px;
      height: 50px;
      line-height: 50px;
      .title {
        font-size: 16px;
      }
      .arrow {
        color: #bbb;
      }
    }
    .m-content-wrap {
      overflow-x: scroll;
      .content-list-wrap {
        width: 850px;
        padding-left: 10px;
        display: flex;
        box-sizing: border-box;
        .content-list {
          width: 150px;
          height: 210px;
          flex: 0 0 150px;
          border: 1px solid #ddd;
          border-radius: 8px;
          overflow: hidden;
          margin-right: 10px;
          .top-img {
            width: 100%;
            height: 150px;
            position: relative;
            .blur-img {
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              z-index: -2;
              img {
                display: block;
                width: 100%;
                height: 100%;
              }
            }
            .blur-bg {
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              backdrop-filter: blur(5px);
              background-color: rgba(0, 0, 0, 0.35);
              z-index: -1;
            }
            .img-box {
              width: 100%;
              height: 50%;
              background-color: red;
              position: absolute;
              top: 25%;
              left: 0;
            }
          }
          .text {
            margin: 10px 0;
            font-size: 14px;
            padding: 0 5px;
            box-sizing: border-box;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .m-user-msg {
            display: flex;
            align-items: center;
            padding: 0 5px;
            .user-img {
              width: 20px;
              height: 20px;
              background-color: red;
              border-radius: 999px;
            }
            .user-name {
              width: 38px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              margin: 0 20px 0 5px;
            }
            .icon-eye {
              margin-left: auto;
              font-size: 16px;
            }
            .view-count {
              margin-left: 5px;
            }
          }
        }
        .search-all {
          width: 30px;
          padding: 0 8px;
          box-sizing: border-box;
          color: #888;
          line-height: 15px;
          padding-top: 70px;
          .van-icon-arrow {
            width: 15px;
            height: 15px;
            border-radius: 999px;
            border: 1px solid #ddd;
            box-sizing: border-box;
            margin-top: 5px;
            text-align: center;
            line-height: 15px;
          }
        }
      }
    }
  }
  .swiper2 {
    width: 100vw;
    padding: 10px;
    background-color: rgb(246, 246, 246);
    box-sizing: border-box;
    position: relative;
    left: -10px;
    .swiper2-content {
      width: 100%;
      height: 100px;
      border-radius: 8px;
      overflow: hidden;
    }
  }
  .goods-recomment {
    position: relative;
    ::v-deep .van-tabs__line {
      bottom: 20px;
      background-color: rgb(255, 103, 0);
    }
    .content-wrap {
      width: 100%;
      padding: 10px 0;
      overflow-x: scroll;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      .content-list-wrap {
        width: 471px;
        display: flex;
        flex: 0 0 471px;
        align-items: center;
        flex-wrap: wrap;
      }
      .content-list {
        width: 110px;
        margin-right: 10px;
        margin-bottom: 20px;
        &:nth-child(3n) {
          margin-right: 0;
        }
        .top-img {
          background-color: rgb(246, 246, 246);
          width: 100%;
          height: 110px;
          border-radius: 8px;
        }
        .goods-name {
          margin: 20px 0;
        }
        .price {
          .new-price {
            color: rgb(255, 103, 0);
            font-weight: 600;
            font-size: 14px;
          }
          .before-price {
            text-decoration: line-through;
            position: relative;
            left: 3px;
            top: 1px;
          }
        }
      }
    }
    .scrollbar-wrap {
      position: absolute;
      bottom: 20px;
      left: 0;
      right: 0;
      margin: 0 auto;
    }
  }
  .goods-info {
    ::v-deep .van-tabs__line {
      bottom: 20px;
      background-color: rgb(255, 103, 0);
    }
    .img-box {
      width: 100vw;
      position: relative;
      left: -10px;
    }
  }
  .bottom-title {
    font-size: 16px;
    text-align: left;
    height: 40px;
    padding-left: 2px;
    line-height: 40px;
  }
  .bottom-goods-recomment {
    width: 100vw;
    position: relative;
    left: -10px;
    .content-wrap {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      width: 100%;
      .content-list {
        width: calc(50% - 20px);
        margin: 0 10px 10px 0;
        text-align: left;
        .img-box {
        }
        .goods-name {
          margin-top: 20px;
          font-size: 18px;
          padding-left: 30px;
        }
        .goods-price {
          font-size: 15px;
          color: rgb(255, 103, 0);
          padding-left: 30px;
          margin-top: 10px;
          span {
            font-size: 12px;
            position: relative;
            top: -2px;
            margin-right: 2px;
          }
        }
      }
    }
  }
  .goToTop-btn {
    width: 36px;
    height: 36px;
    background: url("@/assets/images/home/top.451d650ecd.png") no-repeat center
      center;
    background-size: cover;
    border-radius: 999px;
    position: fixed;
    bottom: 80px;
    right: 20px;
  }
  ::v-deep .van-popup__close-icon--top-right {
    width: 20px;
    height: 20px;
    background-color: #f5f5f5;
    border-radius: 999px;
    font-size: 12px;
    top: 12px;
    right: 12px;
    line-height: 20px;
    color: #000;
    text-align: center;
  }
  ::v-deep .van-popup--round {
    padding: 15px 15px 0;
    box-sizing: border-box;
    .choiceActive {
      background-color: rgb(254, 242, 241) !important;
      color: rgb(255, 103, 0);
      border: 1px solid rgb(255, 103, 0);
    }
    .show-area {
      display: flex;
      align-items: center;
      margin-bottom: 30px;
      .img-box {
        width: 100px;
        height: 100px;
        padding: 10px;
        background-color: #f5f5f5;
        border-radius: 8px;
        margin-right: 15px;
        box-sizing: border-box;
      }
      .info {
        text-align: left;
        .info-price {
          font-size: 20px;
          font-weight: 600;
          color: rgb(255, 103, 0);
          margin-bottom: 20px;
        }
        .info-goods {
          font-weight: 600;
        }
      }
    }
    .version-area {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 20px;
      .version-title {
        font-weight: 600;
        font-size: 14px;
        width: 100%;
        margin-bottom: 15px;
        text-align: left;
      }
      .version-choice {
        width: 100px;
        height: 28px;
        padding: 0 10px;
        border-radius: 999px;
        margin-right: 15px;
        text-align: center;
        line-height: 28px;
        box-sizing: border-box;
        background-color: #f0f0f0;
        margin-bottom: 15px;
      }
    }
    .color-area {
      margin-bottom: 40px;
      .color-title {
        font-weight: 600;
        font-size: 14px;
        width: 100%;
        text-align: left;
        margin-bottom: 10px;
      }
      .color-choice-wrap {
        display: flex;
        align-items: center;
        .color-choice {
          width: 60px;
          height: 25px;
          background-color: #f0f0f0;
          border-radius: 999px;
          text-align: center;
          line-height: 25px;
          padding: 0 10px;
          box-sizing: border-box;
          margin-right: 15px;
        }
      }
    }
    .bug-area {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      padding-right: 15px;
      font-weight: 600;
      margin-bottom: 15px;
      .bug-title {
        font-weight: 600;
      }
      .bug-choice-num {
        display: flex;
        align-items: center;
        .reduce {
        }
        .num {
          padding: 8px 20px;
          border-radius: 5px;
          margin: 0 10px;
          background-color: #f0f0f0;
        }
        .add {
        }
      }
    }
  }
}
</style>